import { history } from "umi";
import { useState, useEffect } from "react";
import bgImage from "@/assets/p2/background4.jpg";
import "@/pages/p2/gamepage.css";
import Dialog from "@/components/Dialog"; //对话组件
import dialogImage from "@/assets/p1/dialog_background_red.png";
import TreasureBox from "@/components/TreasureBox"; //百宝袋组件
import AchievementList from "@/components/AchievementList"; //成就组件

import characterImage from "@/assets/p1/characters/protagonist.png";
import Character from "@/components/Character"; //角色组件
import front1 from "@/assets/p1/front1.png";
import front2 from "@/assets/p1/front2.png";
import front3 from "@/assets/p1/front3.png";
import back1 from "@/assets/p1/back1.PNG";
import back2 from "@/assets/p1/back2.PNG";
import back3 from "@/assets/p1/back3.PNG";
import left1 from "@/assets/p1/left1.png";
import left2 from "@/assets/p1/left2.png";
import left3 from "@/assets/p1/left3.png";
import right1 from "@/assets/p1/right1.png";
import right2 from "@/assets/p1/right2.png";
import right3 from "@/assets/p1/right3.png";

import dogStandingImage from "@/assets/p1/dog_standing.png";
import ani1 from "@/assets/p2/ani1.png";
import ani3 from "@/assets/p2/ani3.png";
import ani2 from "@/assets/p2/ani2.png";
import people5 from "@/assets/p2/people5.png";
import Card from "@/components/Card";
import "@/pages/p2/fangcheng2.css";

const fangcheng2 = () => {
	const [dia1, setDia1] = useState(false);
	const [dia2, setDia2] = useState(false);
	const [isSuccess, setIsSuccess] = useState(false);
	const [hui, setHui] = useState(false);
	const [num1, setNum1] = useState(0);
	const [num2, setNum2] = useState(0);
	const [num3, setNum3] = useState(0);

	const [que, setQue] = useState(false);

	const dialog1 = [
		"人齐了，现在这里有一个问题亟待解决，请大家集思广益",
		"今有张家去赶集市，卖牛二、羊五，以买十三豕，有余钱一千。卖牛三、豕三，以买九羊，" +
			"钱适足。卖羊六、豕八，以买五牛，钱不足六百。问牛、羊、豕各几何",
	];
	const dialog2 = [
		"这位学生可真是颖悟绝伦",
		"夫子可是知道什么",
		"事事皆有定理，相信你已经有所感悟，剩下的需要自己去领悟",
		"",
	];

	const screenWidth = window.innerWidth;
	const screenHeight = window.innerHeight;
	const [renX, setRenX] = useState(0.9 * screenWidth);
	const [renY, setRenY] = useState(0.75 * screenHeight);
	const [characterPosition, setCharacterPosition] = useState({
		x: renX,
		y: renY,
	});
	const characterImages = {
		front: [front1, front2, front3, front2],
		left: [left1, left2, left3, left2],
		right: [right1, right2, right3, right2],
		back: [back1, back2, back3, back2]
	};
	const handlePositionChange = newPosition => {
		setCharacterPosition(newPosition);
	};

	useEffect(() => {
		const { x, y } = characterPosition;
		if (
			x > 0.6 * screenWidth &&
			y > 0.6 * screenHeight &&
			y < 0.7 * screenHeight &&
			x < 0.65 * screenWidth &&
			!dia2 &&
			!isSuccess
		) {
			setDia1(true);
		}
		if (dia2 || isSuccess) {
			setDia1(false);
		}
	});

	const num1change = event => {
		const { value } = event.target;
		setNum1(value);
	};
	const num2change = event => {
		const { value } = event.target;
		setNum2(value);
	};
	const num3change = event => {
		const { value } = event.target;
		setNum3(value);
	};

	const queren = () => {
		if (num1 == 500 && num2 == 300 && num3 == 1200) {
			setQue(false);
			setDia1(false);
			setDia2(true);
		}
	};

	const chengjiu = () => {};

	return (
		<div
			className="game-page"
			style={{
				backgroundImage: `url(${bgImage})`,
			}}
		>
			<TreasureBox itemId={4} />
			<AchievementList achievementId={9} handleClick={chengjiu} />
			<img
				src={dogStandingImage}
				style={{
					position: "absolute",
					left: "72%",
					top: "65%",
					width: "100px",
				}}
			/>
			<Character
				characterImage={characterImage}
				characterImages={characterImages}
				canMove={true}
				initPositionX={renX}
				initPositionY={renY}
				onPositionChange={handlePositionChange}
				ifProtagonist="true"
			/>
			{dia1 && (
				<Dialog
					backgroundImage={dialogImage}
					dialogues={dialog1}
					triggerIndexEvents={[1]}
					eventHandlers={[
						() => {
							setQue(true);
						},
					]}
					dialogueImages={[
						{ leftImage: people5 },
						{ leftImage: people5 },
					]}
				></Dialog>
			)}
			<div
				className="question"
				style={{ display: que ? "block" : "none" }}
			>
				<ul>
					<li>
						<img src={ani1} />
						<input
							type="number"
							value={num1}
							onChange={num1change}
						/>
					</li>
					<li>
						<img src={ani2} />
						<input
							type="number"
							value={num2}
							onChange={num2change}
						/>
					</li>
					<li>
						<img src={ani3} />
						<input
							type="number"
							value={num3}
							onChange={num3change}
						/>
					</li>
				</ul>
				<button id="b5" onClick={queren}>
					确 认
				</button>
			</div>
			{dia2 && (
				<Dialog
					backgroundImage={dialogImage}
					dialogues={dialog2}
					triggerIndexEvents={[3]}
					eventHandlers={[
						() => {
							setDia1(false);
							setDia2(false);
							setIsSuccess(true);
						},
					]}
					dialogueImages={[
						{ leftImage: people5 },
						{ rightImage: characterImage },
						{ leftImage: people5 },
						{},
					]}
				></Dialog>
			)}
			<Card
				onClick={() => {
					setHui(true);
					setDia1(false);
				}}
				visible={isSuccess}
				cardId={9}
			>
				<p>获得成就</p>
				<p>方程</p>
			</Card>
			{hui && (
				<div
					onClick={() => {
						history.push("/p2/huigui");
					}}
					className="finish"
				>
					<p>已完成所有成就，</p>
					<p>即将返回现实世界</p>
				</div>
			)}
		</div>
	);
};

export default fangcheng2;
